<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="标题">
          <a-input placeholder="请输入标题" v-decorator="['title', validatorRules.title]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="图片" hasFeedback>
          <image-upload text="上传" v-model="narrowImg" :isMultiple="false" ></image-upload>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="类型">
          <a-radio-group v-model="bannerType">
            <a-radio :value="1">跳转链接</a-radio>
            <a-radio :value="2">自定义</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="链接">
          <a-input :placeholder="bannerType == 2 ? '填写页面路径' : '填web的网址' " v-decorator="['url', validatorRules.url]" />
          <div v-show="bannerType == 1">
            <a-tag color="orange">填web的网址</a-tag>
          </div>
          <div v-show="bannerType == 2">
            <a-tag color="orange">填写页面路径</a-tag>
          </div>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="标签排序">
          <a-input-number
            v-decorator="['sort', validatorRules.sort ]"
            placeholder="请输入标签排序"
            :min="1"
            :max="99"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="状态">
          <a-radio-group v-decorator="['status', validatorRules.status ]">
            <a-radio :value="0">关闭</a-radio>
            <a-radio :value="1">启用</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import ApiTree from '@/api/common/banner';
import ImageUpload from '@/components/ImageUpload'

import { Slime } from '@/mixins/slime';
export default {
  name: 'categoryModal',
  mixins: [Slime],
  components: {
    ImageUpload,
  },
  data() {
    return {
      title: '操作',
      id:0,
      model: {},
      form: this.$form.createForm(this),
      validatorRules: {
        title: { rules: [{ required: true, message: '请输入标题!' }] },
        url: { rules: [{ required: true, message: '请输入链接!' }] },
        sort: { rules: [{ required: true, message: '请输入排序!' }] },
        status: { rules: [{ required: true, message: '请输入状态!' }], initialValue:1 },
      },
      narrowImg:'',
      bannerType:1,
    }
  },
  created() {},
  methods: {
    // 增
    crudCreate() {
      this.crudUpdate({})
    },
    // 改
    crudUpdate(record) {
      this.form.resetFields()  //重新设置领域
      this.model = Object.assign({}, record)
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          title: record.title,
          url: record.url,
          sort: record.sort,
          status: record.status?record.status:0,
        });
        this.id = record.id
        this.narrowImg = record.img
        this.bannerType = record.type ? record.type: 1
      });
    },
    // 提交
    handleOk() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          const param = {
            ...values, 
            id: that.id, 
            img: that.narrowImg,
            type: that.bannerType,
          };
          console.log(param)
          if (!that.id) {
            that.submitCreate(param);
          } else {
            that.submitUpdate(param);
          }
        }
      });
    },
    // 提交 增
    submitCreate(param) {
      const that = this;
      ApiTree.getAdd(param)
        .then((res) => {
          that.$message.success('新增成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 提交 改
    submitUpdate(param) {
      const that = this;
      ApiTree.getUpdate(param)
        .then((res) => {
          that.$message.success('编辑成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    handleCancel(){
      this.closeModal();
    },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
      this.form.resetFields();
      this.$emit('closeModal');
    },
  }, 
}
</script>

<style lang="less" scoped>
</style>